<template>
  <h3>{{ selected === -1 ? "添加" : "编辑" }}</h3>
  <!-- 三元表达式, 如果selected是-1, 就是添加, 如果不是-1, 就是编辑 -->
  <form>
    <div>
      <label for="title">标题:</label>
      <!-- label标签的for属性，对应的是input标签的id属性 -->
      <input type="text" id="title" v-model="form.title" />
      <!-- 双向绑定,  v-model="form.title" 会自动帮我们绑定value和input事件, -->
    </div>
    <div>
      <label for="date">日期:</label>
      <!-- label标签的for属性，对应的是input标签的id属性 -->
      <input type="date" id="date" v-model="form.date" />
      <!-- 双向绑定,  v-model="form.title" 会自动帮我们绑定value和input事件, -->
    </div>
  </form>
  <button @click="onSubmit">提交</button>
  <button
    @click="
      selected = -1;
      form.title = '';
      form.date = '';
    "
  >
    开始添加
  </button>
  <button @click="mock">添加模拟数据</button>
  <!-- 三元表达式, 如果selected是-1, 就是添加, 如果不是-1, 就是编辑 -->
  <table>
    <thead>
      <!-- 表头,  一般用thead标签包裹 -->
      <tr>
        <th>标题</th>
        <th>日期</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody
      style="display: block; height: 300px; overflow-y: auto"
      @scroll="onScroll"
    >
      <div :style="{ height: arr.length * 30 + 'px' }">
        <div :style="{ height: currentIndex * 30 + 'px' }"></div>
        <tr
          v-for="(item, index) in displayArr"
          :key="item.id"
          style="height: 30px"
        >
          <td>{{ item.title }}</td>
          <td>{{ item.date }}</td>
          <td>
            <button
              @click="
                selected = index; // 选中当前的索引
                form.title = item.title;
                form.date = item.date;
                // onEdit(item.index, item.title, item.date)
              "
            >
              编辑
            </button>
            <button>删除</button>
          </td>
        </tr>
      </div>
      <!-- 表格的主体, 一般用tbody标签包裹 -->
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    const arr = JSON.parse(localStorage.getItem("arr") || "[]");
    return {
      form: {
        title: "",
        date: "",
      }, // 表单数据
      // 下面的arr为什么后面没跟值? 因为我们要把arr放到data中, 但是我们又不想让arr的值在页面中显示, 所以我们就不给arr赋值, 然后在下面的watch中, 我们监听arr的变化, 当arr发生变化的时候, 我们就把arr存储到localStorage中
      arr,
      selected: -1, // 选中的索引  // 当他是-1的时候，就是没有选中任何一项，当他是0的时候，就是选中了第一项
      currentIndex: 0, // 当前的索引
    };
  },
  watch: {
    arr: {
      handler() {
        localStorage.setItem("arr", JSON.stringify(this.arr));
      },
      deep: true,
    },
  },
  computed: {
    displayArr() {
      return this.arr.slice(this.currentIndex, this.currentIndex + 10);
    },
  },
  methods: {
    mock() {
      for (let i = 0; i < 500; i++) {
        this.arr.push({
          title: i + "", // 为什么要加空字符串? 因为如果不加空字符串, 那么i就是一个数字, 但是我们需要的是一个字符串, 所以我们需要把i转换成字符串, 所以我们就给i加一个空字符串, 这样i就会变成一个字符串
          date: "2021-01-01",
          id: i + "",
        });
      }
    },
    onScroll(e) {
      const scrollTop = e.target.scrollTop;
      this.currentIndex = Math.floor(scrollTop / 30);
    },
    onSubmit() {
      if (this.selected === -1) {
        // q:下面为什么要给一个新对象?
        // a: 因为如果直接把form对象放到数组中, 那么当form对象中的数据发生变化的时候, 数组中的数据也会发生变化 , 因为数组中存储的是对象的引用 , 所以我们需要把form对象中的数据展开, 然后放到一个新的对象中, 然后把这个新的对象放到数组中

        this.arr.push({
          ...this.form,
          id: Date.now() + Math.floor(Math.random() * 1000),
        });
        // ...this.form 会把form对象中的所有属性都展开,  然后把展开的属性放到一个新的对象中, 然后把这个新的对象放到数组中, 这样就可以把form对象中的所有属性都放到数组中
      } else {
        this.arr[this.selected] = { ...this.arr[this.selected], ...this.form };
      }
      this.form = {
        title: "",
        date: "",
      };
      this.selected = -1;
    },
    // onEdit(key) {
    //   console.log(key);
    // },
  },
};
</script>

<style>
</style>